<template>
  <div class="bottom-tab">
    <div class="tab-item"  v-for="(item,index) in selectedTab" :key="index"  @click="selectTab(index)">
        <img :src="activeIndex === index ? require(`~/static/footer/${item.image.replace('.png', '1.png')}`) : require(`~/static/footer/${item.image}`)" alt="" style="width: 2.25rem; height:2.25rem;">
      <div style="font-size:.6875rem">{{item.name}}</div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'BottomTab',
  data() {
    return {
      selectedTab: [
        {
            name:'首页',
            image:'home.png'
        },
          {
            name:'资讯',
            image:'zixun.png'
        },
          {
            name:'广场',
            image:'guangchang.png'
        },
          {
            name:'福利',
            image:'fuli.png'
        },
          {
            name:'我的',
            image:'my.png'
        }
      ],
         activeIndex: 0 // 追踪当前选中的 tab
    };
  },
      props: {
    types: {
      type: Number,
     default: 0 
    },
  },
  mounted() {
      this.activeIndex = this.types;
  },
  methods: {
      selectTab(index) {
      this.activeIndex = index;
       switch (index) {
        case 0:
          this.$nuxt.$router.push('/');
            // window.location.href = `${this.$domain}`;
          break;
        case 1:
          this.$nuxt.$router.push('/news');
          break;
        case 2:
          this.$nuxt.$router.push('/square');
          break;
           case 3:
           this.$nuxt.$router.push('/fuli');
        //  window.location.href = `${this.$domain}/?ct=wap&ac=fuli`;
          break;
          case 4:
        //  window.location.href = `${this.$domain}/?ct=wap&ac=account`;
        this.$nuxt.$router.push('/mine');
          break;
        default:
          this.$nuxt.$router.push('/404'); // 默认路由，处理未定义的情况
          break;
      }
    },

  }
};
</script>


<style scoped>
body {
  font-size: 16px; /* 默认字体大小 */
}

/* 小屏幕设备 */
@media (max-width: 600px) {
  body {
    font-size: 14px; /* 小屏幕设备的字体大小 */
  }
}

/* 中屏幕设备 */
@media (min-width: 601px) and (max-width: 1200px) {
  body {
    font-size: 16px; /* 中屏幕设备的字体大小 */
  }
}

/* 大屏幕设备 */
@media (min-width: 1201px) {
  body {
    font-size: 18px; /* 大屏幕设备的字体大小 */
  }
}
.bottom-tab {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background: #ffff;
  width: 100%;
  z-index: 99;
}

.tab-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  
}

.tab-item:hover {
font-weight: bold;
}
</style>